<template>
	<ul class="footer">
		<li :class="{ active: isActive('/index') }" @click="toIndex">
			<i class="fa fa-home"></i>
			<p>首页</p>
		</li>
		<li :class="{ active: isActive('/found') }" @click="tofound">
			<i class="fa fa-compass"></i>
			<p>发现</p>
		</li>
		<li :class="{ active: isActive('/orderList') }" @click="toOrderList">
			<i class="fa fa-file-text-o"></i>
			<p>订单</p>
		</li>
		<li :class="{ active: isActive('/mybusiness') }" @click="toMy">
			<i class="fa fa-user-o"></i>
			<p>我的</p>
		</li>
	</ul>
</template>

<script>
	export default {
		name: 'Footer',
		data() {
			return {
				currentRoute: this.$route.path
			};
		},
		methods: {
			toIndex() {
				this.$router.push({
					path: '/index'
				});
			},
			toMy() {
            const user = this.$getSessionStorage('user');
            const businesser = this.$getSessionStorage('businesser');

             if (user) {
             // 如果用户登录信息存在，则导航到用户页面
              this.$router.push({ path: '/my' });
            } else if (businesser) {
               // 如果商家登录信息存在，则导航到商家页面
                this.$router.push({ path: '/mybusiness' });
                } else {
                 // 如果没有角色信息，则导航到登录页面
                 this.$router.push({ path: '/login' });
                   }
                },
			tofound() {
				this.$router.push({
					path: '/found'
				});
			},
			toOrderList() {
				const user = this.$getSessionStorage('user');
				const businesser = this.$getSessionStorage('businesser');
				if (user) {
					this.$router.push({path: '/orderList'});
				}
				else if (businesser) {
					this.$router.push({path: '/BOrderList'});
				} else {
                 // 如果没有角色信息，则导航到登录页面
                 this.$router.push({ path: '/login' });
                   }
			},
			isActive(path) {
				return this.currentRoute === path;
			}
		},
		watch: {
			'$route'(newRoute) {
				this.currentRoute = newRoute.path;
			}
		}
	}
</script>

<style>
	.wrapper .footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.wrapper .footer li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .footer li p {
		font-size: 2.8vw;
	}

	.wrapper .footer li i {
		font-size: 5vw;
	}

	.wrapper .footer li.active i,
	.wrapper .footer li.active p {
		color: #007bff; /* 蓝色 */
	}
</style>